<template>
  <div class="renew">
    <el-dialog :title="isRenew ? '学员续费' : '续费提醒'" :visible.sync="visible" @close="handleCancel">
      <div v-if="isRenew">
        <el-row>
          <el-col :span="4">学员姓名：</el-col>
          <el-col :span="20">
            <div class="grid-content bg-purple-light">
              {{studentInfo.name}}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">监护人手机：</el-col>
          <el-col :span="19">
            <div class="grid-content bg-purple-light">
              {{studentInfo.parentMobile}}
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">次课类型：</el-col>
          <el-col :span="20">
            <el-select v-model="selectedList" placeholder="请选择次课类型" style="width: 54%" clearable size="small">
              <el-option v-for="(item, index) in train_ck_course_list" :key="index" :value="item.timesCourseCode" :label="item.timesCourseText">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">有效期：</el-col>
          <el-col :span="20">
            <el-date-picker 
              v-model="date" 
              type="daterange" 
              size="small" 
              placeholder="请选择有效期" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">报名费：</el-col>
          <el-col :span="20">
            <e-input-money v-model.trim="signupFee" size="small" :max="999999" placeholder="请输入报名费"/>
          </el-col>
        </el-row>
      </div>
      <div class="remind_renew" v-else>
        <p>该学员还剩余{{studentInfo.times > 0 ? `${studentInfo.remainTimes}${studentInfo.remainUnit}` : `约${longTime + 1}周的`}}课，确认发送续费提醒短信给家长吗？</p>
        <p>短信内容：</p>
        <p class="note_content" ref="messageContent">
          {{person_info.authName}}致亲爱的家长，您好！截止{{new Date().format('yyyy年MM月dd日')}}，{{studentInfo.name}}报名的《{{classData.trainCourseName}}》还剩余{{studentInfo.times > 0  ? `${studentInfo.remainTimes}${studentInfo.remainUnit}` : `约${longTime + 1}周的`}}课，为了不影响孩子正常上课，请您及时办理续费，感谢您的合作！
        </p>
        <div class="selectedNum">注：已提醒过 {{train_student_renew_num}} 次</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit" v-if="isRenew" :disabled="!(selectedList)">确 定</el-button>
        <el-button type="primary" @click="handleSubmit" v-else>确 定</el-button>
        <el-button @click="handleCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EInputMoney from '@e-ui/InputMoney'
import { mapGetters } from 'vuex'
import api from 'api/train'
export default {
  components: {
    EInputMoney
  },
  props: {
    isRenew: {
      type: Boolean,
      default: true
    },
    studentInfo: {
      type: Object
    },
    classData: {
      type: Object
    }
  },
  data () {
    return {
      visible: true,
      selectedList: '',
      signupFee: 0,
      date: '',
      longTime: ''
    }
  },
  computed: {
    ...mapGetters({
      person_info: 'person_info',
      train_student_renew_num: 'train_student_renew_num',
      train_ck_course_list: 'train_ck_course_list'
    })
  },
  created () {
    if (!this.isRenew) {
      this.handleRenew(this.studentInfo.remainTimes)
      this.$store.dispatch('person_info')
      this.$store.dispatch('train_student_renew_num', {studentClassId: this.studentInfo.studentClassId})
    } else {
      this.$store.dispatch('train_ck_course_list', {courseId: this.$route.query.crruid, classLevelId: this.classData.classesId})
    }
  },
  methods: {
    handleCancel () {
      this.$emit('input', false)
    },
    handleRenew (value) {
      // let num = val.replace(/[^0-9]/ig, '')
      if (this.studentInfo.times > 0) {
        this.longTime = value
      } else {
        this.longTime = Math.floor(value / 7)
      }
    },
    handleSubmit () {
      if (this.isRenew) {
        let revenVo = {
          classId: this.studentInfo.classId,
          classesId: this.classData.classesId,
          courseId: this.classData.courseId,
          expiresStartDate: this.date[0] ? new Date(this.date[0]).getTime() : '',
          expiresEndDate: this.date[1] ? new Date(this.date[1]).getTime() : '',
          fee: this.signupFee,
          studentId: this.studentInfo.studentId,
          schoolId: this.studentInfo.schoolId,
          timesCourseCode: this.selectedList
        }
        api.renew(JSON.stringify(revenVo)).then(res => {
          this.$emit('success').$emit('input', false)
        })
      } else {
        let smsReq = {
          classId: this.studentInfo.classId,
          endDate: new Date().getTime(),
          studentClassId: this.studentInfo.studentClassId,
          studentId: this.studentInfo.studentId,
          surplus: this.studentInfo.remainTimes
        }
        api.renewRemind(JSON.stringify(smsReq)).then(res => {
          this.$emit('success').$emit('input', false)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .renew {
    .el-col{
      line-height:36px;
    }
    .remind_renew {
      p {
        padding: 10px 0;
      }
      .note_content {
        margin-top: 2px;
        background: #f5f5f5;
        padding: 10px;
        line-height: 25px;
        text-indent: 15px;
      }
      .selectedNum {
        margin-top: 25px; 
      }
    }
  }
</style>
